<template>
    <div class="mainDiv">
        <div class="filter">
            <filter-component :filters="dataMap.filterArr" v-if="Object.keys(dataMap.filterArr).length > 0" 
                @getTableData="getTableData"
                :pageParams="dataMap.pageParams"
                searchUrl="/api/User/getPageFilter"
            />
        </div>
        <div class="options">
            <el-row class="mb-4">
                <el-button type="success" size="small" @click="handleAddNew">新增</el-button>
                <el-button type="info" size="small" @click="handleDisable">禁用</el-button>
                <el-button type="primary" size="small" @click="handleEnable">启用</el-button>
                <el-button type="danger" size="small" @click="resetPassword">重置密码</el-button>
                <el-button type="warning" size="small">分配角色</el-button>
            </el-row>
        </div>
        <div class="dataList">
            <list-table 
            :filters="dataMap.filterArr" 
            :tableData="dataMap.tableData" 
            @getSelections="getSelections" 
            />
        </div>
        <div class="page">
            <pagination 
            :totalNum="dataMap.totalNum"
            @getPageParams="getPageParams"
            />
        </div>
    </div>
    <dialog-form 
    :filters="dataMap.filterArr" 
    :vModel="dataMap.addNewVisible" 
    titleText="新增用户"
    closeDialogFunc="closeAddNewDialog"
    getDialogDataFunc="getAddNewDialogData"
    @closeAddNewDialog="closeAddNewDialog"
    @getAddNewDialogData="getAddNewDialogData"
    />
</template>


<script setup>
import { onMounted, reactive } from 'vue';
import httpTool from '../../httpRequest';
import FilterComponent from '../../components/Filter.vue';
import ListTable from '../../components/ListTable.vue';
import Pagination from '../../components/Pagination.vue';
import DialogForm from '../../components/DialogForm.vue';
import { ElMessage,ElMessageBox  } from 'element-plus'
let dataMap = reactive({
    filterArr:{},
    tableData:{},
    selections:{},
    totalNum:{},
    pageParams:{},
    addNewVisible:false,
    addNewVisible1:false,
});

const initData = ()=>{
    httpTool.post('/api/User/getPageFilter',{
           
    }).then(response=>{
        dataMap.filterArr = response.data.columns
        dataMap.tableData = response.data.listData
        dataMap.totalNum = response.data.total
    }).catch(error=>{

    })
}
onMounted(
    ()=>{
        initData();
    }
)
const getTableData = (data)=>{
    dataMap.tableData = data
}
//关闭对话框
const closeAddNewDialog = (status)=>{
    dataMap.addNewVisible = status;
}
//接收分页信息
const getPageParams = (data)=>{
    dataMap.pageParams = data
}
//获取选中的行信息
const getSelections = (selections)=>{
    dataMap.selections = selections
}
//新增
const handleAddNew = ()=>{
    dataMap.addNewVisible = true;
}
//提交表单
const getAddNewDialogData = (formData)=>{
    httpTool.post('/api/User/addUser',formData).then(response=>{
        ElMessage({
            message: response.msg,
            type: 'success',
        })
        dataMap.addNewVisible = false;
        initData();
    }).catch(error=>{

    })
}
//禁用
const handleDisable = ()=>{
    if(Object.keys(dataMap.selections).length == 0){
        ElMessage({
            message: '必须至少选择一条记录',
            type: 'warning',
        })
        return false;
    }
    ElMessageBox.confirm(
        '禁用选中的用用户？',
        '提示',
        {
            confirmButtonText:'确认',
            cancelButtonText:'取消',
            type:'warning'
        }
    ).then(()=>{
        let ids = [];
        for(let i in dataMap.selections){
            ids.push(dataMap.selections[i].id);
        }
        httpTool.post('/api/User/changeUserStatus',{ids:ids,status:2}).then(response=>{
            ElMessage({
                message: response.msg,
                type: 'success',
            })
            initData();
        }).catch(error=>{

        })
    }).catch(()=>{
        ElMessage({
            message: '你取消了操作',
            type: 'info',
        })
    })
}
//启用
const handleEnable = ()=>{
    if(Object.keys(dataMap.selections).length == 0){
        ElMessage({
            message: '必须至少选择一条记录',
            type: 'warning',
        })
        return false;
    }
    ElMessageBox.confirm(
        '启用选中的用用户？',
        '提示',
        {
            confirmButtonText:'确认',
            cancelButtonText:'取消',
            type:'warning'
        }
    ).then(()=>{
        let ids = [];
        for(let i in dataMap.selections){
            ids.push(dataMap.selections[i].id);
        }
        httpTool.post('/api/User/changeUserStatus',{ids:ids,status:1}).then(response=>{
            ElMessage({
                message: response.msg,
                type: 'success',
            })
            initData();
        }).catch(error=>{

        })
    }).catch(()=>{
        ElMessage({
            message: '你取消了操作',
            type: 'info',
        })
    })
}
//重置密码
const resetPassword = ()=>{
    if(Object.keys(dataMap.selections).length == 0){
        ElMessage({
            message: '必须至少选择一条记录',
            type: 'warning',
        })
        return false;
    }
    ElMessageBox.confirm(
        '给选中的用户重置密码？',
        '提示',
        {
            confirmButtonText:'确认',
            cancelButtonText:'取消',
            type:'warning'
        }
    ).then(()=>{
        let ids = [];
        for(let i in dataMap.selections){
            ids.push(dataMap.selections[i].id);
        }
        httpTool.post('/api/User/resetPassword',{ids:ids}).then(response=>{
            ElMessage({
                message: response.msg,
                type: 'success',
            })
            initData();
        }).catch(error=>{

        })
    }).catch(()=>{
        ElMessage({
            message: '你取消了操作',
            type: 'info',
        })
    })
}

</script>

<style lang="scss" scoped>
.mainDiv{
    height:calc(100vh - 90px);
    display:flex;
    flex-direction: column;
    .filter{
        height:100px;
        position:relative;
    }
    .options{
        margin-left:10px;
        height:30px;
    }
    .dataList{
        height:calc(100vh - 270px);
    }
    .page{
        height:50px;
        margin-left:10px;
        margin-top:10px;
    }
}
</style>